<template>
	<view class="container">
		<NavBar title="商品详情"></NavBar>
		<swiper
		  class="swiperWrap"
		  circular="true"
		  duration="100"
		  indicator-dots="true"
		  indicator-active-color="rgb(31, 182, 131)"
		>
		  <swiper-item class="swiperItem" >
		    <image :src="goods.coverPic"></image>
		  </swiper-item>
		</swiper>
		<view class="proInfo">
			<text class="title">{{goods.title}}</text>
			<text class="viceTitle">{{goods.viceTitle}}</text>
			<text class="price">{{goods.price}} 积分</text>
		</view>
		<view class="proDetail">
		  <view class="title">商品详情</view>
		  <mp-html :content="goods.content"></mp-html> 
		</view>
		<GoodsNav :pid="pid" :goods="goods"></GoodsNav>
	</view>
</template>

<script>
	import GoodsNav from './components/GoodsNav.vue'
	export default {
		components:{
			GoodsNav
		},
		data() {
			return {
				pid:'',
				goods:{}
			}
		},
		onLoad(data){
			this.pid = data.pid
		},
		onReady(){
			this.getProDetail()
		},
		methods:{
			async getProDetail(){
				const {code,data} = await this.$axios.api.getProDetail({pid:this.pid})
				if(code === 200){
					this.goods = data
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	background: rgb(240, 240, 240);
	display: flex;
	flex-direction: column;
	align-items: center;
	.swiperWrap {
		width: 100%;
		height: 460rpx;
		swiper-item {
		  padding: 30rpx 80rpx;
		  box-sizing: border-box;
		  background-color: rgba(31, 182, 131,0.1);
		  image{
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		  }
		}
	}
	.proInfo{
		width:96%;
		height: 200rpx;
		font-size: 24rpx;
		background-color: #fff;
		padding: 0 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin: 20rpx 0;
		.title{
			font-size: 32rpx;
			color: #555555;
			font-weight: bold;
		}
		.viceTitle{
			color: $u-success;
		}
		.price{
			font-size: 30rpx;
			color: #F0AD4E;
			font-weight: bold;
		}
	}
	.proDetail{
		width: 96%;
		height: auto;		font-size: 24rpx;
		background-color: #fff;
		padding: 0 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		margin-bottom: 80rpx;
		.title{
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			font-weight: bold;
			border-bottom: 1rpx dotted #bbb;
			margin-bottom: 20rpx;
		}
	}
}
</style>
